<template>
    <div class="makeScore">
        <van-nav-bar style="z-index: 999;position: relative;" :placeholder=true fixed title="打分" left-arrow
            @click-left="$router.go(-1)" />
        <div class="makeInfo">
            <p class="scoreTit">
                选手号码:NO.{{ editScoreInfo.scoreInfo.number }}
            </p>
            <div class="overScore">最终得分:<span class="score">{{ overScore }}</span></div>
            <div class="shouTit">
                请进行打分
                <!-- <span class="interf">打分区间(0-10)</span> -->
            </div>
            <div class="scoreLists">
                <div class="playScoreBox" v-for="(item, index) in makeScoreList" :key="index">
                    <p class="playScoreName">{{ item.name }}</p>
                    <van-stepper :integer="maxScore == 10 ? false : true" min="0" :step="maxScore == 10 ? 0.1 : 1"
                        :max="maxScore" v-model="item.score" style="margin-bottom: .3rem;" input-width="60%"
                        button-size=".7rem" @change="changeScore(item)" />
                    <van-slider min="0" :step="maxScore == 10 ? 0.1 : 1" :max="maxScore" style="width: 90%;margin: auto;"
                        v-model="item.score" active-color="#5b55ff">
                        <template #button>
                            <div class="custom-button">no</div>
                        </template>
                    </van-slider>
                </div>
            </div>
        </div>
        <div class="bottomBtn">
            <van-button style="width:48%;height:6vh;border-radius:.15rem" color="#3f3f63" @click="$router.go(-1)">取消</van-button>
            <van-button style="width:48%;height:6vh;border-radius:.15rem" color="linear-gradient(#619df5, #5a56fb)"
                @click="submitBtn">确定</van-button>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import {scoreNumUpdateSingnal, scoreRecordMultiple} from '@/apis/score'
export default {
    data() {
        return {
            choseIndex: 0,
            showBlock: true,
            maxScore: 10,
            makeScoreList: []
        }
    },
    methods: {
        retract() {
            this.showBlock = !this.showBlock
        },
        async scoreRecordMultiple(){
            const res = await scoreRecordMultiple(this.editScoreInfo.scoreInfo.id)
            this.makeScoreList = res.result
        },
        async submitBtn() {
            // if(this.editScoreInfo.projectInfo.projectStatus == 2){
            //     this.$toast.fail("当前项目已经结束了");
            //     return 
            // }
            let scoreList = []
            this.makeScoreList.forEach(item=>{
                scoreList.push({
                    id: item.id,
                    name: item.name,
                    score: item.score,
                    num: this.editScoreInfo.projectInfo.scoreType===0?10:100,
                    scoreModelId: item.scoreModelId,
                    scoreRatio: item.scoreRatio / 100
                })
            })
            let params = {
                scoreProjectId: this.editScoreInfo.scoreInfo.scoreProjectId,
                number: this.editScoreInfo.scoreInfo.number,
                score: this.overScore,
                scoreList
            }
            const res = await scoreNumUpdateSingnal(params)
            if(res.code == 1) return this.$toast(res.message)
            this.$router.go(-1)
        },
        changeScore(item) {
            if (Number(item.score) > Number(this.maxScore)) {
                item.score = this.maxScore
            }
        }
    },
    computed: {
        ...mapState('score',['editScoreInfo']),
        overScore() {
            let overNum = 0
            this.makeScoreList.forEach(item => {
                overNum += item.score * item.scoreRatio
            })
            if (this.maxScore == 10) {
                return Math.round(overNum * 10) / 10
            } else {
                return overNum.toFixed(0)
            }
        }
    },
    mounted(){
        this.maxScore = this.editScoreInfo.projectInfo.scoreType===0?10:100,
        this.makeScoreList = this.editScoreInfo.projectInfo.scoreModelList.map(item=>{
            item.score = 0
            item.scoreModelId = item.id
            return item
        })
        console.log(this.editScoreInfo.projectInfo)
        this.scoreRecordMultiple()
    }
}
</script>

<style lang="less" scoped>
::v-deep .van-stepper__input {
    margin: 0 .4rem;
    background: #212237;
    color: #fff;
}

::v-deep .van-stepper__minus,
::v-deep .van-stepper__plus {
    border-radius: .15rem;
    background: #212237;
    color: rgba(255, 255, 255, .8);
}

::v-deep .van-stepper__minus--disabled {
    color: rgba(255, 255, 255, .4);
}

::v-deep .van-slider {
    background: #212237;
    height: .4rem;
}

.bottomBtn {
    width: 100%;
    height: 12vh;
    padding: .3rem .35rem;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    background: #27283d;
}

.custom-button {
    width: .4rem;
    height: .4rem;
    font-size: 10px;
    color: #fff;
    line-height: 18px;
    text-align: center;
    background-color: #fff;
    border-radius: 100px;
}

.makeScore {
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to bottom, #ba65f5, #27273f);
    padding: .8rem .35rem 12vh;
}

.makeInfo {
    text-align: center;
    color: #fff;

    .scoreTit {
        font-size: .5rem;
        margin-bottom: .8rem;
    }

    .overScore {
        background: rgba(0, 0, 0, .4);
        border-radius: .1rem;
        font-size: .3rem;
        padding: .5rem;
        line-height: .3rem;
        margin-bottom: .4rem;

        .score {
            font-size: .54rem;
        }
    }

    .choseNum {
        font-size: .33rem;
        text-align: left;
        margin-bottom: .4rem;
    }

    .choseTenNum {
        font-size: .4rem;
        display: flex;
        justify-content: space-between;
        width: 70%;
        margin: auto;
        margin-bottom: .4rem;

        .arrow {
            background: rgba(0, 0, 0, .3);
            padding: .15rem;
            font-size: .3rem;
            line-height: .4rem;
            border-radius: .15rem;
            width: .7rem;
            height: .7rem;
        }
    }

}

.shouTit {
    text-align: left;
    font-size: .36rem;
    margin-bottom: .6rem;

    .interf {
        font-size: .27rem;
        margin-left: .2rem;
    }
}

.scoreLists {
    overflow: auto;
    height: 50vh;
    .playScoreBox {
        background: #32324e;
        width: 100%;
        border-radius: .2rem;
        padding: .8rem .3rem .6rem;
        margin-bottom: .6rem;
        position: relative;

        .playScoreName {
            position: absolute;
            left: .3rem;
            top: .2rem;
            font-size: .25rem;
        }
    }
}
</style>